import React, {Component} from 'react';

import {Form, Row, Col, Icon, Layout, Input, Button, Select, Radio, Card} from 'antd';
const RadioButton = Radio.Button;
const {Header, Content, Footer} = Layout;
let zfb = require('../img/recharge/img_zfb.png');
let wx = require('../img/recharge/img_wx.png');
const FormItem = Form.Item;
import HeaderMin from './HeaderMin'
import FooterMin from './FooterMin'

const RadioGroup = Radio.Group;
const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 14},
  },
};

class Recharge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 'mail'
    }
    console.log("this.props", this.props);
  }

  handleSubmit() {

  };

  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <Layout className="layout" style={{minWidth: '1600px'}}>
        <HeaderMin/>
          <Content style={{minHeight: '650px',backgroundColor:'#f4f4f4'}}>
            <Row type="flex" justify="center">
              <Col span={12} style={{background: 'white', padding: '1%', marginTop: '3%'}}>
                <h1 style={{color:'#1676be',fontSize:'30px'}}>充值中心</h1>
                <Form onSubmit={this.handleSubmit} className="login-form" style={{marginTop:'3%'}}>
                  <FormItem
                    {...formItemLayout}
                    label={<b>选择游戏</b>}
                  >
                    {getFieldDecorator('game', {
                      rules: [{required: true, message: '请选择需要充值的游戏'}]
                    })(
                      <Select
                        placeholder="请选择游戏"
                      >
                        <Option value="1">混沌江湖</Option>
                      </Select>
                    )}
                  </FormItem>

                  <FormItem
                    {...formItemLayout}
                    label={<b>选择服务器</b>}
                  >
                    {getFieldDecorator('server', {
                      rules: [{required: true, message: '请选择需要充值的游戏'}]
                    })(
                      <Select placeholder="请选择游戏">
                        <Option value="1">混沌江湖</Option>
                      </Select>
                    )}
                  </FormItem>


                  <FormItem
                    {...formItemLayout}
                    label={<b>充值账号</b>}
                    hasFeedback
                  >
                    {getFieldDecorator('account', {
                      rules: [{
                        required: true, message: '请填写充值账号',
                      }],
                    })(
                      <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="请填写充值账号"/>
                    )}
                  </FormItem>


                  <FormItem
                    {...formItemLayout}
                    label={<b>确认账号</b>}

                    hasFeedback
                  >
                    {getFieldDecorator('accountDouble', {
                      rules: [{
                        required: true, message: '请确认充值账号',
                      }],
                    })(
                      <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="请确认充值账号"/>
                    )}
                  </FormItem>


                  <FormItem
                    {...formItemLayout}
                    label={<b>请选择支付方式</b>}
                    hasFeedback
                  >
                    {getFieldDecorator('payType', {
                      initialValue: '1',
                      rules: [{
                        required: true, message: '请确认充值账号',
                      }],
                    })(
                      <RadioGroup name="payFlag">
                        <RadioButton value="1" style={{height:43}}>
                          <img src={zfb} alt=""/>
                        </RadioButton>
                        <RadioButton value="2" style={{height:43}}>
                          <img src={wx} alt=""/>
                        </RadioButton>
                      </RadioGroup>
                    )}
                  </FormItem>

                  <FormItem
                    {...formItemLayout}
                    label={<b>充值金额</b>}
                    hasFeedback
                  >
                    {getFieldDecorator('payMoney', {
                      initialValue: '1',
                      rules: [{
                        required: true, message: '请选择充值金额',
                      }],
                    })(
                      <RadioGroup>
                              <Radio value="6">6 元</Radio>
                              <Radio value="30">30 元</Radio>
                              <Radio value="60">68 元</Radio>
                      </RadioGroup>
                    )}
                  </FormItem>


                  <FormItem style={{textAlign:'center'}}>
                    <Button
                      type="primary"
                      htmlType="submit"
                      style={{width: '25%'}}
                    >
                      充值
                    </Button>
                  </FormItem>
                </Form>
              </Col>
            </Row>
          </Content>

        <Row style={{marginTop:'3%'}}>
          <FooterMin />
        </Row>
      </Layout>
    );
  }
}
export default Form.create()(Recharge);
//Recharge.defaultProps =  Form.create()(Recharge);;

//export default Recharge;
